<!-- 
  Kuda includes a library and editor for authoring interactive 3D content for the web.
  Copyright (C) 2011 SRI International.

  This program is free software; you can redistribute it and/or modify it under the terms
  of the GNU General Public License as published by the Free Software Foundation; either 
  version 2 of the License, or (at your option) any later version.
 
  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; 
  without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
  See the GNU General Public License for more details.
 
  You should have received a copy of the GNU General Public License along with this program; 
  if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, 
  Boston, MA 02110-1301 USA.
-->

<div id="createParticleEffectDlg">
    <form id="pteForm" class="dialogForm" method="post" action="">
        <fieldset id="pteTemplates">
            <legend>
                Select a Template
            </legend>
            <ol>
                <li>
                	<p>
                		Use a template of pre-defined parameters or define
						your own below.
                	</p>
                    <select id="pteTemplateSelect">
                        <option value="-1">Select Template</option>
                    </select>
                </li>
            </ol>
        </fieldset>
        <fieldset id="pteSystemType">
            <legend>
                Select Effect Type
            </legend>
            <ol>
                <li>
                    <select id="pteType">
                        <option value="-1">Select Type</option>
                        <option>Burst</option>
                        <option>Trail</option>
                        <option>Emitter</option>
                    </select>
                </li>
            </ol>
        </fieldset>
        <fieldset id="pteSysParams">
            <legend>
                System Parameters
            </legend>
            <ol>
                <li>
                    <label for="pteState">
                        State
                    </label>
                    <select id="pteState">
                        <option value="-1">Select State</option>
                        <option value="0">Blend</option>
                        <option value="1">Add</option>
                        <option value="2">Blend Pre-Multiply</option>
                        <option value="3">Blend No Alpha</option>
                        <option value="4">Subtract</option>
                        <option value="5">Inverse</option>
                    </select>
                </li>
                <li>
                    <label for="pte-numParticles" class="long">
                        Number of Particles
                    </label>
                    <input type="text" value="" id="pte-numParticles" class="short" />
                </li>
                <li>
                    <div class="long">
                        <label for="pte-position">
                            Position
                        </label>
                        <div id="pte-positionDiv">
                        </div>
                    </div>
                    <div class="long">
                        <label for="pte-positionRange">
                            Range
                        </label>
                        <div id="pte-positionRangeDiv">
                        </div>
                    </div>
                </li>
                <li>
                    <label for="pte-timeRange" class="long">
                        System Life Time
                    </label>
                    <input type="text" value="" id="pte-timeRange" class="short" />
                </li>
                <li>
                    <div>
                        <label for="pte-lifeTime" class="long">
                            Particle Life Time
                        </label>
                        <input type="text" value="" id="pte-lifeTime" class="short" />
                    </div>
                    <div>
                        <label for="pte-lifeTimeRange" class="long">
                            Range
                        </label>
                        <input type="text" value="" id="pte-lifeTimeRange" class="short" />
                    </div>
                </li>
                <li>
                    <label for="pte-startTime" class="long">
                        Particle Start Time
                    </label>
                    <input type="text" value="" id="pte-startTime" class="short" />
                </li>
                <li>
                    <label for="pteFireInterval" class="long">
                        Fire Interval
                    </label>
                    <input type="text" value="" id="pteFireInterval" class="short" />
                </li>
            </ol>
        </fieldset>
        <fieldset id="pteAppearanceParams">
            <legend>
                Appearance Parameters
            </legend>
            <ol>
                <li>
                    <label for="pte-billboard" class="long">
                        Billboard
                    </label>
                    <input type="text" value="" id="pte-billboard" class="short" />
                </li>
                <li>
                    <label for="pte-orientation" class="long">
                        Orientation
                    </label>
                    <div class="long" id="pte-orientationDiv">
                    </div>
                </li>
                <li>
                    <label for="pteColorRamp0R" class="long" id="pteColorRamp0Lbl">
                        Color Ramp
                    </label>
                    <div id="pteColorRampWrapper" class="long">
                        <button id="pteAddColorToRamp">
                            Add Color
                        </button>
                    </div>
                </li>
                <li id="pteColors">
                    <div>
                        <label for="pteColorMultDiv" class="long" id="pteColorMultLbl">
                            Color Multiplier
                        </label>
                    </div>
                    <div>
                        <label for="pte-colorMultRange" class="long">
                            Range
                        </label>
                        <div class="long" class="pte-colorMultRangeDiv">
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <label for="pte-startSize" class="long">
                            Start Size
                        </label>
                        <input type="text" value="" id="pte-startSize" class="short" />
                    </div>
                    <div>
                        <label for="pte-startSizeRange" class="long">
                            Range
                        </label>
                        <input type="text" value="" id="pte-startSizeRange" class="short" />
                    </div>
                </li>
                <li>
                    <div>
                        <label for="pte-endSize" class="long">
                            End Size
                        </label>
                        <input type="text" value="" id="pte-endSize" class="short" />
                    </div>
                    <div>
                        <label for="pte-endSizeRange" class="long">
                            Range
                        </label>
                        <input type="text" value="" id="pte-endSizeRange" class="short" />
                    </div>
                </li>
            </ol>
        </fieldset>
        <fieldset id="pteMotionParams">
            <legend>
                Motion Parameters
            </legend>
            <ol>
            <li>
                <div>
                    <label for="pte-acceleration" class="long">
                        Local Acceleration
                    </label>
                    <div class="long" id="pte-accelerationDiv">                    	
                    </div>
                </div>
                <div>
                    <label for="pte-accelerationRange" class="long">
                        Range
                    </label>
                    <div class="long" id="pte-accelerationRangeDiv">
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <label for="pte-velocity" class="long">
                        Local Velocity
                    </label>
                    <div class="long" id="pte-velocityDiv">
                    </div>
                </div>
                <div>
                    <label for="pte-velocityRange" class="long">
                        Range
                    </label>
                    <div class="long" id="pte-velocityRangeDiv">
                    </div>
                </div>
            </li>
            <li>
                <label for="pte-worldAcceleration" class="long">
                    World Acceleration
                </label>
                <div class="long" id="pte-worldAccelerationDiv">
                </div>
            </li>
            <li>
                <label for="pte-worldVelocity" class="long">
                    World Velocity
                </label>
                <div class="long" id="pte-worldVelocityDiv">
                </div>
            </li>
            <li>
                <div>
                    <label for="pte-spinSpeed" class="long">
                        Spin Speed
                    </label>
                    <input type="text" value="" id="pte-spinSpeed" class="short" />
                </div>
                <div>
                    <label for="pte-spinSpeedRange" class="long">
                        Range
                    </label>
                    <input type="text" value="" id="pte-spinSpeedRange" class="short" />
                </div>
            </li>
            <li>
                <div>
                    <label for="pte-spinStart" class="long">
                        Spin Start
                    </label>
                    <input type="text" value="" id="pte-spinStart" class="short" />
                </div>
                <div>
                    <label for="pte-spinStartRange" class="long">
                        Range
                    </label>
                    <input type="text" value="" id="pte-spinStartRange" class="short" />
                </div>
            </li>
        </fieldset>
        <fieldset id="pteTextureAnimParams">
            <legend>
                Texture Animation
            </legend>
            <ol>
                <li>
                    <label for="pte-numFrames" class="long">
                        Number of Frames
                    </label>
                    <input type="text" value="" id="pte-numFrames" class="short" />
                </li>
                <li>
                    <div>
                        <label for="pte-frameStart" class="long">
                            Frame Start
                        </label>
                        <input type="text" value="" id="pte-frameStart" class="short" />
                    </div>
                    <div>
                        <label for="pte-frameStartRange" class="long">
                            Range
                        </label>
                        <input type="text" value="" id="pte-frameStartRange" class="short" />
                    </div>
                </li>
                <li>
                    <label for="pte-frameDuration" class="long">
                        Frame Duration
                    </label>
                    <input type="text" value="" id="pte-frameDuration" class="short" />
                </li>
            </ol>
        </fieldset>
        <fieldset id="ptePreview">
            <legend>
                Preview Your Changes
            </legend>
            <ol>
                <li>
                    <button id="ptePreviewStartBtn">
                        Start
                    </button>
                    <button id="ptePreviewStopBtn">
                        Stop
                    </button>
                </li>
            </ol>
        </fieldset>
        <fieldset id="pteSave">
            <legend>
                Save Your Particle Effect
            </legend>
            <ol>
                <li>
                    <label for="pteName">
                        Name:
                    </label>
                    <input type="text" id="pteName" autocomplete="off" />
                    <div class="buttons">
                        <button id="pteSaveBtn" disabled="disabled">
                            Save
                        </button>
                        <button id="pteCancelBtn">
                            Cancel
                        </button>
                    </div>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
